<template>
  <div class="action-edit">
    <!-- 预览轮播 -->
    <div class="img-swipe" v-if="false">
      <div></div>
      <van-swipe @change="onSwipeChange">
        <van-swipe-item v-for="(item, index) in editActs" :key="index"
          @click="selectEditAct(index)">
          <van-image
            width="128"
            height="128"
            fit="contain"
            src=""
          />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ swipeIndex + 1 }}/{{ editActs.length }}</div>
        </template>
      </van-swipe>
      <div></div>
    </div>
    <div>
      <van-image fit="none" width="224" height="160" style="margin: 10px auto;"
      :src="testImgSrc" @click="showDrawData()"  v-show="$store.state.option.showImage" />
    </div>
    <!-- 综合菜单 -->
    <div class="menu">
      <van-button icon="replay" type="primary" size="mini" plain v-show="false">
        {{ i18n('autoFill') }}
      </van-button>
    </div>
    <!-- 编辑区 -->
    <van-tabs v-model:active="activedTab" @change="showDrawData">
      <van-tab :title="i18n('menu-timeline')" name="timeline">Timeline</van-tab>
      <van-tab :title="i18n('res-p')" name="p">
        <van-cell :title="i18n('part-body')">
          <span @click="openSheet('body')">{{ getFrameName('body') }}</span>
          <span></span>
          <span @click="openSheet('arm')">{{ getFrameName('arm') }}</span>
          <span @click="openSheet('leg')">{{ getFrameName('leg') }}</span>
        </van-cell>
        <van-cell :title="i18n('part-clothes')">
          <span @click="openSheet('clothes')">{{ getFrameName('clothes') }}</span>
          <span @click="openSheet('wing')">{{ getFrameName('wing') }}</span>
          <span @click="openSheet('sleeve')">{{ getFrameName('sleeve') }}</span>
          <span @click="openSheet('pants')">{{ getFrameName('pants') }}</span>
        </van-cell>
        <van-cell :title="i18n('part-head')">
          <span @click="openSheet('head')">{{ getFrameName('head') }}</span>
          <span @click="openSheet('face')">{{ getFrameName('face') }}</span>
        </van-cell>
        <van-cell :title="i18n('part-hair')">
          <span @click="openSheet('hair')">{{ getFrameName('hair') }}</span>
          <span @click="openSheet('hair1')">{{ getFrameName('hair1') }}</span>
        </van-cell>
        <van-cell :title="i18n('part-cap')">
          <span @click="openSheet('cap')">{{ getFrameName('cap') }}</span>
        </van-cell>
        <van-cell :title="i18n('part-facial')">
          <span @click="openSheet('facial')">{{ getFrameName('facial') }}</span>
          <span @click="openSheet('facial1')">{{ getFrameName('facial1') }}</span>
        </van-cell>
        <van-cell :title="i18n('part-ear')">
          <span @click="openSheet('ear')">{{ getFrameName('ear') }}</span>
          <span @click="openSheet('ear1')">{{ getFrameName('ear1') }}</span>
        </van-cell>
        <van-cell :title="i18n('part-horn')">
          <span @click="openSheet('horn')">{{ getFrameName('horn') }}</span>
          <span @click="openSheet('horn1')">{{ getFrameName('horn1') }}</span>
        </van-cell>
        <van-cell :title="i18n('part-weapon')">
          <span @click="openSheet('weapon')">{{ getFrameName('weapon') }}</span>
        </van-cell>
      </van-tab>
      <van-tab :title="i18n('res-a')" name="a">
        <van-cell :title="i18n('res-doA')">
          <span @click="openSheet('a-door')">{{ getFrameName('a-door') }}</span>
          <span @click="openSheet('a-door1')">{{ getFrameName('a-door1') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-amA')">
          <span @click="openSheet('a-body')">{{ getFrameName('a-body') }}</span>
          <span @click="openSheet('a-armor')">{{ getFrameName('a-armor') }}</span>
          <span @click="openSheet('a-skirt')">{{ getFrameName('a-skirt') }}</span>
          <span @click="openSheet('a-booster')">{{ getFrameName('a-booster') }}</span>
          <span @click="openSheet('a-arms')" v-if="false">{{ getFrameName('a-arms') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-dcA')">
          <span @click="openSheet('a-arml')">{{ getFrameName('a-arml') }}</span>
          <span @click="openSheet('a-armr')">{{ getFrameName('a-armr') }}</span>
          <span @click="openSheet('a-arml1')">{{ getFrameName('a-arml1') }}</span>
          <span @click="openSheet('a-armr1')">{{ getFrameName('a-armr1') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-lpA')">
          <span @click="openSheet('a-legl')">{{ getFrameName('a-legl') }}</span>
          <span @click="openSheet('a-legr')">{{ getFrameName('a-legr') }}</span>
          <span @click="openSheet('a-legl1')">{{ getFrameName('a-legl1') }}</span>
          <span @click="openSheet('a-legr1')">{{ getFrameName('a-legr1') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-ppA')">
          <span @click="openSheet('a-propulsion')">{{ getFrameName('a-propulsion') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-rhA')">
          <span @click="openSheet('a-weapon')">{{ getFrameName('a-weapon') }}</span>
          <span @click="openSheet('a-weapon1')">{{ getFrameName('a-weapon1') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-lhA')">
          <span @click="openSheet('a-shield')">{{ getFrameName('a-shield') }}</span>
        </van-cell>
      </van-tab>
      <van-tab :title="i18n('res-s')" name="s">
        <van-cell :title="i18n('res-amS')">
          <span @click="openSheet('s-body')">{{ getFrameName('s-body') }}</span>
          <span @click="openSheet('s-tleg')">{{ getFrameName('s-tleg') }}</span>
          <span @click="openSheet('s-armor')">{{ getFrameName('s-armor') }}</span>
          <span @click="openSheet('s-tail')">{{ getFrameName('s-tail') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-doS')">
          <span @click="openSheet('s-head')">{{ getFrameName('s-head') }}</span>
          <span @click="openSheet('s-eye')">{{ getFrameName('s-eye') }}</span>
          <span @click="openSheet('s-cap')">{{ getFrameName('s-cap') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-dcS')">
          <span @click="openSheet('s-fleg')">{{ getFrameName('s-fleg') }}</span>
          <span @click="openSheet('s-bleg')">{{ getFrameName('s-bleg') }}</span>
          <span @click="openSheet('s-foot1')">{{ getFrameName('s-foot1') }}</span>
          <span @click="openSheet('s-foot2')">{{ getFrameName('s-foot2') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-ppS')">
          <span @click="openSheet('s-wing1')">{{ getFrameName('s-wing1') }}</span>
          <span @click="openSheet('s-wing2')">{{ getFrameName('s-wing2') }}</span>
        </van-cell>
        <van-cell :title="i18n('part-weapon')">
          <span @click="openSheet('s-weapon')">{{ getFrameName('s-weapon') }}</span>
          <span @click="openSheet('s-book')">{{ getFrameName('s-book') }}</span>
        </van-cell>
      </van-tab>
      <van-tab :title="i18n('res-t')" name="t">
        <van-cell :title="i18n('res-doT')">
          <span @click="openSheet('t-head')">{{ getFrameName('t-head') }}</span>
          <span @click="openSheet('t-head1')">{{ getFrameName('t-head1') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-amT')">
          <span @click="openSheet('t-body')">{{ getFrameName('t-body') }}</span>
          <span @click="openSheet('t-body1')">{{ getFrameName('t-body1') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-dcT')">
          <span @click="openSheet('t-arml')">{{ getFrameName('t-arml') }}</span>
          <span @click="openSheet('t-armr')">{{ getFrameName('t-armr') }}</span>
          <span @click="openSheet('t-arml1')">{{ getFrameName('t-arml1') }}</span>
          <span @click="openSheet('t-armr1')">{{ getFrameName('t-armr1') }}</span>
          <span @click="openSheet('t-arml2')">{{ getFrameName('t-arml2') }}</span>
          <span @click="openSheet('t-armr2')">{{ getFrameName('t-armr2') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-lpT')">
          <span @click="openSheet('t-leg')">{{ getFrameName('t-leg') }}</span>
          <span @click="openSheet('t-legb')">{{ getFrameName('t-legb') }}</span>
          <span @click="openSheet('t-legl')">{{ getFrameName('t-legl') }}</span>
          <span @click="openSheet('t-legr')">{{ getFrameName('t-legr') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-ppT')">
          <span @click="openSheet('t-cloak')">{{ getFrameName('t-cloak') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-rhT')">
          <span @click="openSheet('t-waeponrf')">{{ getFrameName('t-waeponrf') }}</span>
          <span @click="openSheet('t-waeponrb')">{{ getFrameName('t-waeponrb') }}</span>
        </van-cell>
        <van-cell :title="i18n('res-lhT')">
          <span @click="openSheet('t-waeponlf')">{{ getFrameName('t-waeponlf') }}</span>
          <span @click="openSheet('t-waeponlb')">{{ getFrameName('t-waeponlb') }}</span>
        </van-cell>
      </van-tab>
    </van-tabs>
    <!-- 选项面板 -->
    <van-action-sheet
      v-model:show="sheetActived"
      @select="onSheetSelect"
      :actions="sheetList" 
      :cancel-text="i18n('cancel')"
      overlay-class="sheet-overlay"
      class="sheet" >
      <template #description>
        <van-field 
          v-model="sheetFilter" 
          :label="i18n('search')"
          :placeholder="i18n('tips-search')"
          left-icon="search"
          clearable
          class="sheet-search"
        >
          <template #button>
            <van-checkbox v-model="sheetNoRegex">{{ i18n('noRegex') }}</van-checkbox>
          </template>
        </van-field>
        
      </template>
    </van-action-sheet>
  </div>
</template>
 
<script>
module.exports = {
  data() {
    return {
      swipeIndex: 0,
      activedTab: 'p', // p a s t timeline
      sheetActived: false, // 选项面板激活状态
      sheetActKey: '', // 选项所属部件类型
      sheetFilter: '', // 选项列表过滤匹配文本
      sheetNoRegex: false, // 选项列表是否禁用正则过滤
      swipeIndex: 0, // 轮播内容下标
      editIndex: 0, // 编辑区当前激活对象下标
      editActs: [{}, {}, {}, {}, {}], // 编辑区缓存数据

      exclude: {
      },
      testImgSrc: '', // 测试用
    };
  },
  computed: {
    /** 选项数据对象 */
    sheetList() {
      let result = [];
      let list = ['none'];
      let actItem = this.$store.state.act[this.sheetActKey];
      if (!actItem) return result; // 必须存在part
      let res = this.$store.state.res[actItem.res];
      let frameNote = this.$store.state.frameNote[actItem.res] || {}; console.log('frameNote', frameNote);
      if (!res) return result; // 必须存在res
      // 是否需要正则过滤
      if (this.sheetNoRegex) {
        let resData = res.data || {};
        for (let key in resData) list.push(key); // 填装res中的所有key
      } else {
        if (actItem['list']) list.push(...actItem['list']);
      }
      // 组装控件所需数据结构
      for (let i = 0; i < list.length; i++) {
        // 过滤搜索内容
        if (this.sheetFilter && list[i].indexOf(this.sheetFilter) == -1) continue;
        // 装填数据
        let item = {};
        item.name = list[i];
        if (this.$store.state.option.showFrameNote) item.subname = frameNote[list[i]] || '';
        if (list[i] === 'none' && actItem.name === '') item.color = '#ee0a24'; 
        if (actItem.name === list[i]) item.color = '#ee0a24';
        result.push(item);
      }
      return result;
    }
  },
  mounted() {
    window.setTimeout(this.showDrawData, 2000); // 测试：打开时加载一次图像
    console.log("ViewActionEdit.mounted()", this);
  },
  methods: {
    /** 获取多语言文本 */
    i18n(key, upperFirst) {
      let result = this.$store.getters.i18n(key);
      return upperFirst ? _.upperFirst(result) : result;
    },
    /** 获取动作帧名称 */
    getFrameName(actKey) {
      let part = this.$store.state.act[actKey];
      return (part && part.name) ? part.name : this.i18n('options-none');
    },
    /** 开启选择面板 */
    openSheet(key) {
      this.sheetActKey = key;
      this.sheetActived = true;
      console.log('openSheet', key);
    },
    /** 选择面板选取事件 */
    onSheetSelect(item) {
      let payload = {
        part: this.sheetActKey,
        name: item.name === 'none' ? '' : item.name
      };
      this.$store.commit('setActFrame', payload);
      this.showDrawData(); // 选取后直接展示
      //console.log('onSheetSelect:', item, payload);
    },
    /** 轮播切换动作监听 */
    onSwipeChange(index) {
      this.swipeIndex = index;
    },
    /** 选取编辑的动画帧 */
    selectEditAct(index) {
      console.log('selectEditAct', index);
    },
    /** 切换编辑面板类型 */
    onTabsChange(name) {

    },
    /** 显示当前数据拼合的图像 */
    async showDrawData(mode, excludes) {
      if (this.activedTab.length > 1) return; // 排除非素材选项卡
      let payload = {};
      payload.mode = mode || this.activedTab;
      payload.excludes = excludes || [];
      let dataList = await this.$store.dispatch('loadDrawRes', payload);
      let canvas = this.$store.state.tCanvas;
      canvas.clean();
      if (this.$store.state.option.canvasBackground === 'axis') canvas.drawAxis();
      this.testImgSrc = canvas.draw(...dataList).toImgUrl();
    },
  },
};
</script>
